<template>
    <div class="wel">
        <div class="head">
            <div class="hd1">
                <div class="hd1_ch">
                    <div>
                        <i class="el-icon-warning"></i>
                        <span>文字1</span>
                    </div>
                    <div>
                        数据1
                    </div>
                </div>
            </div>
            <div class="hd2">
                <div class="hd2_ch">
                    <div>
                        <i class="el-icon-s-opportunity"></i>
                        <span>文字2</span>
                    </div>
                    <div>数据2</div>
                </div>
            </div>
            <div class="hd3">
                <div class="hd3_ch">
                    <div>
                        <i class="el-icon-s-custom"></i>
                        <span>文字3</span>
                    </div>
                    <div>数据3</div>
                </div>
            </div>
            <div class="hd4">
                <div class="hd4_ch">
                    <div>
                        <i class="el-icon-c-scale-to-original"></i>
                        <span>文字4</span>
                    </div>
                    <div>数据4</div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="con1">
                <!-- 1 -->
                <div>
                    <div class="tu1">
                        <i class="el-icon-s-fold"></i>
                        <span>图1</span>
                    </div>
                    <div class="tu1_bt" style="width:100%;height:calc(100% - 40px);">
                        <e-charts 
                        class="chart1"
                        :option="option"
                        />
                    </div>
                </div>
                <!-- 2 -->
                <div>
                    <div class="tu2">
                        <i class="el-icon-s-fold"></i>
                        <span>图2</span>
                    </div>
                    <div class="tu2_bt" style="width:100%;height:calc(100% - 40px);">
                        <e-charts 
                        class="chart2"
                        :option="option2"
                        />
                    </div>
                </div>
                <!-- 3 -->
                <div>
                    <div class="tu3">
                        <i class="el-icon-s-fold"></i>
                        <span>图3</span>
                    </div>
                    <div class="tu3_bt" style="width:100%;height:calc(100% - 40px);">
                        <e-charts 
                        class="chart3"
                        :option="option3"
                        />
                    </div>
                </div>
            </div>
            <div class="con2">
                <!-- 4 -->
                <div>
                    <div class="tu4">
                        <i class="el-icon-s-fold"></i>
                        <span>图4</span>
                    </div>
                    <div class="tu4_bt" style="width:100%;height:calc(100% - 40px);">
                        <e-charts 
                        class="chart4"
                        :option="option4"
                        />
                    </div>
                </div>
                <!-- 5 -->
                <div>
                    <div class="tu5">
                        <i class="el-icon-s-fold"></i>
                        <span>图5</span>
                    </div>
                    <div class="tu5_bt" style="width:100%;height:calc(100% - 40px);">
                        <e-charts 
                        class="chart5"
                        :option="option5"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                data:this.getRandomData(),
                data2:this.gerRandomData2(),
                data3:this.getRandomData3(),
                data4:this.getRandomData4(),
                data5:this.getRandomData5()
            }
        },
        computed: {
            option(){
                return {
                    xAxis: {
                        type: 'category',
                        data: this.data.map(d => d.time),
                        axisLabel:{
                            interval:0
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.data.map(d => d.value),
                            type: 'line'
                        }
                    ]
                }
            },
            option2(){
                return {
                    title: {
                        text: '图2',
                        subtext: '2022-11-13',
                        left: 'center',
                        // top:10
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: this.data2,
                            emphasis: {
                                itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            },
            option3(){
                return {
                    xAxis: {
                    type: 'category',
                    data: this.data3.map(item=>item.data)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: this.data3.map(item=>item.value),
                        type: 'bar'
                        }
                    ]
                }
            },
            option4(){
                return {
                    legend: {
                        show:false,
                        // top: 'bottom',
                        width:'auto',
                        height:'auto'
                    },
                    tooltip:{
                        show:true
                    },
                    toolbox: {
                        show: false,
                        // feature: {
                        // mark: { show: true },
                        // dataView: { show: true, readOnly: false },
                        // restore: { show: true },
                        // saveAsImage: { show: true }
                        // }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [50, 100],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: this.data4
                        }
                    ]
                }
            },
            option5(){
                return {
                    title: {
                        text: '滑动滑轮',
                        subtext: '可缩放'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.data5.map(item=>item.name),
                        axisLabel: {
                            show:true,
                            interval:0,
                            inside:false,
                            color: '#9cdc7d'
                        },
                        axisTick:false,
                        z:10
                        
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show:true,
                            color: '#999'
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            showBackground: true,
                            data: this.data5.map(item=>item.value),
                        }
                    ]
                }
            }
        },
        methods: {
            getRandomData(){
                return [
                    {
                        time:'2018-01-01',
                        value:Math.random() * 100,
                    },
                    {
                        time:'2018-02-01',
                        value:Math.random() * 100,
                    },
                    {
                        time:'2018-03-01',
                        value:Math.random() * 100,
                    },
                    {
                        time:'2018-04-01',
                        value:Math.random() * 100,
                    }
                ];
            },
            gerRandomData2(){
                return [
                    {
                        value:Math.random() * 100,
                        name:'吃饭'
                    },
                    {
                        value:Math.random() * 100,
                        name:'睡觉'
                    },
                    {
                        value:Math.random() * 100,
                        name:'洗漱'
                    },
                    {
                        value:Math.random() * 100,
                        name:'洗脸'
                    },
                    {
                        value:Math.random() * 100,
                        name:'洗头'
                    }
                ]
            },
            getRandomData3(){
                return [
                    {
                        data:'周一',
                        value:Math.random() * 100,
                    },
                    {
                        data:'周二',
                        value:Math.random() * 100,
                    },
                    {
                        data:'周三',
                        value:Math.random() * 100,
                    },
                    {
                        data:'周四',
                        value:Math.random() * 100,
                    },
                    {
                        data:'周无',
                        value:Math.random() * 100,
                    },
                    {
                        data:'周六',
                        value:Math.random() * 100,
                    },
                    {
                        data:'周日',
                        value:Math.random() * 100,
                    }
                ];
            },
            getRandomData4(){
                return [
                    { value: Math.random() * 100, name: '数据 1' },
                    { value: Math.random() * 100, name: '数据 2' },
                    { value: Math.random() * 100, name: '数据 3' },
                    { value: Math.random() * 100, name: '数据 4' },
                    { value: Math.random() * 100, name: '数据 5' },
                    { value: Math.random() * 100, name: '数据 6' },
                    { value: Math.random() * 100, name: '数据 7' },
                    { value: Math.random() * 100, name: '数据 8' }
                ]
            },
            getRandomData5(){
                return [
                    { value: Math.random() * 100, name: '数据 1' },
                    { value: Math.random() * 100, name: '数据 2' },
                    { value: Math.random() * 100, name: '数据 3' },
                    { value: Math.random() * 100, name: '数据 4' },
                    { value: Math.random() * 100, name: '数据 5' },
                    { value: Math.random() * 100, name: '数据 6' },
                    { value: Math.random() * 100, name: '数据 7' },
                    { value: Math.random() * 100, name: '数据 8' },
                    { value: Math.random() * 100, name: '数据 9' },
                    { value: Math.random() * 100, name: '数据 10' },
                    { value: Math.random() * 100, name: '数据 11' },
                    { value: Math.random() * 100, name: '数据 12' },
                    { value: Math.random() * 100, name: '数据 13' },
                    { value: Math.random() * 100, name: '数据 14' },
                    { value: Math.random() * 100, name: '数据 15' }
                ]
            }
        },
        created(){
            let arr = this.data.map(item=>item.time)
            console.log(arr);
            setInterval(() => {
                this.data = this.getRandomData()
            }, 1000);
            setInterval(() => {
                this.data2 = this.gerRandomData2()
            }, 1000);
            setInterval(() => {
                this.data3 = this.getRandomData3()
            }, 1000);
            setInterval(() => {
                this.data4 = this.getRandomData4()
            }, 1000);
            setInterval(() => {
                this.data5 = this.getRandomData5()
            }, 1000);
        }
    }
</script>

<style lang="less" scoped>
    // .chart {
    // height: 400px;
    // }
    .wel{
        height: 100%;
        .head{
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            &>div{
                width: 20%;
            }
            .hd1{
                background: url(@/assets/bg1.png) no-repeat 100% 100%;
                display: flex;
                align-items: center;
                .hd1_ch{
                    width: 100%;
                    height: 50%;
                    background-image: linear-gradient(to right,
                    rgba(49, 101, 158,.5) 0%,
                    rgba(91, 139, 185,.5) 50%,
                    rgba(255, 255, 255,.5) 100%
                    );
                    display: flex;
                    &>div{
                        flex: 1;
                        &:nth-child(1){
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
                        &:nth-child(2){
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
            }
            .hd2{
                background: url(@/assets/bg2.png) no-repeat 100% 100%;
                display: flex;
                align-items: center;
                .hd2_ch{
                    width: 100%;
                    height: 50%;
                    background-image: linear-gradient(to right,
                    rgba(49, 101, 158,.5) 0%,
                    rgba(91, 139, 185,.5) 50%,
                    rgba(255, 255, 255,.5) 100%
                    );
                    display: flex;
                    &>div{
                        flex: 1;
                        &:nth-child(1){
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
                        &:nth-child(2){
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
            }
            .hd3{
                background: url(@/assets/bg3.png) no-repeat 100% 100%;
                display: flex;
                align-items: center;
                .hd3_ch{
                    width: 100%;
                    height: 50%;
                    background-image: linear-gradient(to right,
                    rgba(49, 101, 158,.5) 0%,
                    rgba(91, 139, 185,.5) 50%,
                    rgba(255, 255, 255,.5) 100%
                    );
                    display: flex;
                    &>div{
                        flex: 1;
                        &:nth-child(1){
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
                        &:nth-child(2){
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
            }
            .hd4{
                background: url(@/assets/bg4.png) no-repeat 100% 100%;
                display: flex;
                align-items: center;
                .hd4_ch{
                    width: 100%;
                    height: 50%;
                    background-image: linear-gradient(to right,
                    rgba(49, 101, 158,.5) 0%,
                    rgba(91, 139, 185,.5) 50%,
                    rgba(255, 255, 255,.5) 100%
                    );
                    display: flex;
                    &>div{
                        flex: 1;
                        &:nth-child(1){
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
                        &:nth-child(2){
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
            }
        }
        .content{
            width: 100%;
            height: calc(100% - 100px);
            .con1,.con2{
                width: 100%;
                height: 300px;
                margin-bottom: 20px;
            }
            .con1{
                display: flex;
                justify-content: space-between;
                &>div{
                    width: 30%;
                    height: 100%;
                    background-color: #f2f6f9;
                    &:nth-child(1){
                        .tu1{
                            height: 40px;
                            line-height: 40px;
                            border-bottom: 1px solid #ddd;
                            i{
                                margin: 0 10px;
                            }
                        }
                        .tu1_bt{
                            // width: 100%;
                            // height: calc(100% - 40px);
                            .chart1{
                                // width: 100%;
                                // height: 100%;
                            }
                        }
                    }
                    &:nth-child(2){
                        .tu2{
                            height: 40px;
                            line-height: 40px;
                            border-bottom: 1px solid #ddd;
                            i{
                                margin: 0 10px;
                            }
                        }
                        .tu2_bt{
                            // width: 100%;
                            // height: calc(100% - 40px);
                            .chart1{
                                // width: 100%;
                                // height: 100%;
                            }
                        }
                    }
                    &:nth-child(3){
                        .tu3{
                            height: 40px;
                            line-height: 40px;
                            border-bottom: 1px solid #ddd;
                            i{
                                margin: 0 10px;
                            }
                        }
                        .tu3_bt{
                            // width: 100%;
                            // height: calc(100% - 40px);
                            .chart1{
                                // width: 100%;
                                // height: 100%;
                            }
                        }
                    }
                }
            }
            .con2{
                display: flex;
                justify-content: space-between;
                &>div{
                    height: 100%;
                    background-color: #f2f6f9;
                    &:nth-child(1){
                        width: 30%;
                        height: 100%;
                        .tu4{
                            height: 40px;
                            line-height: 40px;
                            border-bottom: 1px solid #ddd;
                            i{
                                margin: 0 10px;
                            }
                        }
                    }
                    &:nth-child(2){
                        width: calc(100% - 35%);
                        height: 100%;
                        .tu4{
                            height: 40px;
                            line-height: 40px;
                            border-bottom: 1px solid #ddd;
                            i{
                                margin: 0 10px;
                            }
                        }
                        .tu5{
                            height: 40px;
                            line-height: 40px;
                            border-bottom: 1px solid #ddd;
                            i{
                                margin: 0 10px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>